<template>
  <el-form
    ref="userForm"
    :model="userInfo"
    label-width="120px"
    style="margin-left: 120px; margin-top: 30px"
  >
    <el-form-item label="姓名:">
      <el-input v-model="userInfo.username" style="width:300px" />
    </el-form-item>
    <el-form-item label="密码:">
      <el-input v-model="userInfo.password" type="password" style="width:300px" />
    </el-form-item>
 
    <el-form-item>
      <el-button type="primary" @click="hSubmit">更新</el-button>
    </el-form-item>
 </el-form>
</template>

<script>
import { getUserInfoById, saveUserDetailById } from '@/api/user'
  export default {
    data() {
        return {
          userInfo: {
              username: '',
              password: ''
            }
        }
      },
      created() {
        this.loadUserInfoById()
      },
      methods:{
        async loadUserInfoById(){
          try{
            const res = await getUserInfoById(this.$route.params.id)
          console.log(res,'getUserInfoById')
          this.userInfo = res.data
          }catch(error){
            console.log(error,'error');
          }         
         },
         async hSubmit() {
          try {
            const res = await saveUserDetailById(this.userInfo)
            console.log(res,'saveUserDetailById')
            this.$router.back()
          } catch (error) {
            console.log(error,'404')
          }
         }
      }
  }
</script>